<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="../templates/shopping.xhtml"> <!-- REF TO UI TEMPLATE -->

	<ui:define name="content">
	 <!-- Products -->
		<div class="products">
		<div class="cl"></div>
			
			
		<h:panelGroup id="itemsGroup"> <!-- h: COMPONENT USED TO REFRESH THE CENTRAL PART DURING SEARCH -->	
			
			
			<c:forEach items="#{shop.sellingItems}" var="item" varStatus="rowCounter">
					
			<!-- 
				 -->
				<c:if test="${rowCounter.count == 1 || rowCounter.count % 3 == 0}">
		       		<h:outputText escape="false" value="#{msg['htmlLessThan']}ul#{msg['htmlGreaterThan']}"/> 
				</c:if>
				
				<li id="${rowCounter.count}">
		          
		        
		          
		          	<h:form>
					    <h:panelGrid rendered="#{(item.itemsInStock) == 0}">
			              		<strong>Terminato!</strong>
			            </h:panelGrid>      
					    
					    <h:commandLink  action="#{shop.showItemDetail}">
					        
					        <img src="#{request.contextPath}/#{item.detailImage}" alt=""/>
					        
					        <!-- http://www.javabeat.net/tips/44-hcommandlink-how-to-pass-parameter-to-next.html -->
					        <f:setPropertyActionListener target="#{shop.lastVisitedItem}" value="#{item}"/> 
					    </h:commandLink>
			           
			            
			            <div class="product-info">
			     		   
			              <h3>#{item.name}</h3>
			              <div class="product-desc">
			                <h4>Category..</h4>
			                <p>#{item.description}</p>
			                <strong class="price">#{item.price} <span>€</span></strong> 
			              	<h2>#{item.brand}</h2>
			              	
			              	
			              </div>
			            	
			            </div>
		            
		            </h:form>
		          </li>
		     
				<c:if test="${rowCounter.count % 3 == 0}">
		       		 <script>
		       		 	jQuery('#' + ${rowCounter.count}).addClass('last');
		       		 </script>
				</c:if>
		
				<c:if test="${rowCounter.count % 3 == 0}">
					<h:outputText escape="false"  value="#{msg['htmlLessThan']}/ul#{msg['htmlGreaterThan']}" />
				</c:if>
	 			
		       
			
		</c:forEach>		 
		
		
		</h:panelGroup>
		<div class="cl"></div>
		</div>			
	
	

		</ui:define>
</ui:composition>								<!-- Content -->
